<template>
  <div @contextmenu.prevent="showMenu" class="context-area">
    <h1>右键点击以显示菜单</h1>
    <div class="menu" v-if="menuVisible" :style="{ top: `${menuY}px`, left: `${menuX}px` }">
      <ul>
        <!-- 图标,移动变色, 有子菜单时,菜单显示箭头图标;此逻辑同样作用于其子菜单 -->
        <li
          v-for="item in menuItems"
          :key="item.action"
          @click="handleAction(item.action)"
          class="menu-item"
          :class="{ gray: item.action == 'createShortcutAction' }"
        >
          <img :src="item.icon" alt="" class="menu-icon" />
          {{ item.label }}
          <template v-if="menuVisible">
            <ul>
              <li v-for="s in item.subMenu" :key="s.id">
                {{ s.label }}
              </li>
            </ul>
          </template>
        </li>
      </ul>
        <div  
          v-for="(subItem, subIndex) in item.subMenu"  
          :key="subIndex"  
          @click="executeCommand(subItem.command)"  
        >  
          {{ subItem.title }}  
        </div>  
    </div>

    <!-- <button @click="addMenuItem">添加菜单项</button> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import menuData from './tree.json' // 导入本地 JSON 文件

// 添加新的菜单项
// const addMenuItem = () => {
//   const newItem: MenuItem = {
//     label: `新菜单项 ${menuItems.value.length + 1}`,
//     action: `newAction  ${menuItems.value.length + 1}`
//   }
//   menuItems.value.push(newItem)
// }

interface MenuItem {
  label: string
  action: string
  icon: string
  subMenu?: SubMenu[]
}
interface SubMenu {
  label: string
  id: string
}

const menuItems = ref<MenuItem[]>(menuData) // 从 JSON 文件加载菜单项
const menuVisible = ref(false)
const menuVis = ref(false)
const menuX = ref(0)
const menuY = ref(0)

const showMenu = (event: MouseEvent) => {
  const menuWidth = 240
  const menuHeight = 340
  menuX.value = Math.min(event.clientX, window.innerWidth - menuWidth)
  menuY.value = Math.min(event.clientY, window.innerHeight - menuHeight)
  menuVisible.value = true
}
const showsubMenu = (event: MouseEvent) => {
  const menuWidth = 240
  const menuHeight = 340
  menuX.value = Math.min(event.clientX, window.innerWidth - menuWidth)
  menuY.value = Math.min(event.clientY, window.innerHeight - menuHeight)
  menuVisible.value = true
}

const hideMenu = () => {
  menuVisible.value = false
}

// 根据 action 决定如何处理点击事件
// 遍历参数（事件名）
//
const handleAction = (action: string) => {
  switch (action) {
    case 'viewAction':
      viewAction()
      break
    case 'deleteFile':
      alert('删除文件')
      break
    case 'renameFile':
      alert('重命名文件')
      break
    case 'viewProperties':
      alert('查看属性')
      break
    case 'createAction':
      showsubMenu
      break
    default:
      break
  }
  hideMenu() // 隐藏菜单
}
const viewAction = () => {}
// 监听窗口点击事件以隐藏菜单
onMounted(() => {
  window.addEventListener('click', hideMenu)
})
</script>

<style lang="scss" scoped>
.context-area {
  height: 100vh;
  // display: flex;
  align-items: center;
  justify-content: center;
  // position: relative;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.menu {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  // z-index: 1000;
  width: 192px;
  padding: 0 0;

  .menu-icon {
    // content: '';
    width: 24px;
    height: 24px;
    // margin-left: 192px;
    // background-size: cover;
    /* 让背景图像覆盖整个菜单项 */
    // background-repeat: no-repeat;
    // background-size: contain;
    /* 确保图标适应容器 */
  }

  .menu-item {
    width: 190px; // 调整文字间距
    height: 24px;
    // padding: 8px 12px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;

    &:hover {
      background-color: #7daee5;
    }
  }
}

.gray {
  color: rgb(183, 28, 28);
}
</style>
<!-- 组件 样式图片 图标显示逻辑-->
